<template>
    <section class="admin-layout-container">
        <div class="layout">
            <Layout>
                <Sider ref="side1" hide-trigger collapsible :collapsed-width="78" v-model="isCollapsed">
                    <div class="logo" >
                        <img :src="logoiUrl" width="100" v-if="!isCollapsed" />
                        <Avatar icon="person" size="large" v-else/>
                    </div>
                    <Menu @on-select="choosedMenu" active-name="1-2" theme="dark" width="auto" :class="menuitemClasses">
                        <template v-for="(menu,menu_index) in menus" >
                            <MenuItem :name="menu.name">
                                <Icon :type="menu.icon"></Icon>
                                <span>{{menu.title}}</span>
                            </MenuItem>
                        </template>  
                    </Menu>

                </Sider>
                <Layout>
                    <Header :style="{padding: 0}" class="layout-header-bar">
                        <div style="align-items:center;">
                            <Icon @click.native="collapsedSider" :class="rotateIcon" :style="{margin: '0 20px 0'}" type="navicon-round" size="24"></Icon>
                            <span style="font-size:18px;font-weight:bold">测试后台管理系统</span>
                            <Button style="float: right;":style="{margin: '20px 20px 0'}" type="text" icon="android-exit" size="large" >退出系统</Button>
                        </div>
                        <div style="display: flex;
                                position: relative;
                                padding-left:10px;
                                height: 40px;
                                background: #f5f7f9;
                                align-items: center;
                                box-shadow: 0 2px 1px 1px rgba(100, 100, 100, 0.1);">
                                <template v-for="tab in tags">
                                   
                                    <Tag type="dot" 
                                    :closable="tab.closable"
                                    :color="tab.choosed?'blue':'#e9eaec'"
                                    :name="tab.name"
                                    @click.native="clickTag(tab)"
                                    @on-close="closeTag"

                                    >{{tab.title}}</Tag>
            
                                </template>                    
                         </div>     
                        
                    </Header>

                    <Content :style="{
                    height: 'calc(100% - 100px)',
                    position: 'absolute',
                    top: '100px',
                    overflow: 'auto',
                    padding: '10px',
                    width:isCollapsed?'calc(100% - 78px)':'calc(100% - 200px)'
                    }">
                        <router-view></router-view>
                    </Content>
                </Layout>
            </Layout>
        </div>
    </section>
</template>

<script>
    export default {
        data () {
            return {
                logoiUrl:'https://file.iviewui.com/dist/03635a3c88122ad605117128f3fda0ca.png',
                isCollapsed: false,
                //菜单操作开始
                title:'首页',
                menus:[
                {
                    title:'首页',
                    name:'home',
                    icon:'home',
                    href:'/',
                    closable:false,
                    showInTags:true,
                    showInMenus:true,
                    choosed:true,
                },
                {
                    title:'用户管理',
                    name:'user-manage',
                    icon:'ios-people',
                    href:'user',
                    closable:true,
                    showInTags:false,
                    showInMenus:true,
                    choosed:false,
                },
                {
                    title:'产品管理',
                    name:'product-manage',
                    icon:'unlocked',
                    href:'product',
                    closable:true,
                    showInTags:false,
                    showInMenus:true,
                    choosed:false,
                }, 
                {
                    title:'新闻管理',
                    name:'news-manage',
                    icon:'social-designernews',
                    href:'news',
                    closable:true,
                    showInTags:false,
                    showInMenus:true,
                    choosed:false,
                }, 
                {
                    title:'分类管理',
                    name:'classify-manage',
                    icon:'unlocked',
                    href:'classify',
                    closable:true,
                    showInTags:false,
                    showInMenus:true,
                    choosed:false,
                }, 
                {
                    title:'评论管理',
                    name:'comment-manage',
                    icon:'chatbox-working',
                    href:'comment',
                    closable:true,
                    showInTags:false,
                    showInMenus:true,
                    choosed:false,
                }, 
                ],
            }
        },
        computed: {
            rotateIcon () {
                return [
                    'menu-icon',
                    this.isCollapsed ? 'rotate-icon' : ''
                ];
            },
            menuitemClasses () {
                return [
                    'menu-item',
                    this.isCollapsed ? 'collapsed-menu' : ''
                ]
            },
            tags(){
                let tags=[];

                this.menus.forEach(menu=>{
                  
                    if(menu.showInTags){
                        tags.push(menu);
                    }
                });
                return tags;
            }
        },
        methods: {
            collapsedSider () {
                this.$refs.side1.toggleCollapse();
            },
            choosedMenu(name){
                let menu = null;
                this.menus.forEach(_menu=>{
                    if(_menu.name == name){
                        _menu.showInTags = true;
                        _menu.choosed = true;
                        menu = _menu;
                    }else{
                        _menu.choosed = false;
                    }
                });
                console.log(menu)
                this.$router.push(`${menu.href}`)
              
            },
            clickTag(tag){
                this.tags.forEach(_tag=>{
                   if(_tag.name == tag.name){
                       _tag.choosed=true;
                    }else{
                       _tag.choosed= false;
                    }
                });
                this.$router.push(`${tag.href}`);
            },
            closeTag(event, name){
                let is_choosed = false;
                this.menus.forEach((menu,_index)=>{
                    if(menu.name == name){
                        is_choosed = menu.choosed;
                        menu.showInTags = false;
                    }
                });
                if(is_choosed){
                    let last_tag = this.tags[this.tags.length-1];
                    last_tag.choosed = true;
                    this.$router.push(last_tag.href);
                }
            }
        }
    }
</script>

<style scoped>
.admin-layout-container{
    position: absolute;
    width: 100%;
    height: 100%;
}
.layout{
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    height: 100%;
}
.layout .logo{
    background: #4c364f80;
    border-bottom: 1px solid #363e4f;
    width: auto;
    height: 60px;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.ivu-layout-has-sider{
    height: 100%
}
.layout-header-bar{
    background: #fff;
    box-shadow: 0 1px 1px rgba(0,0,0,.1);
}
.layout-logo-left{
    width: 90%;
    height: 30px;
    background: #5b6270;
    border-radius: 3px;
    margin: 15px auto;
}
.menu-icon{
    transition: all .3s;
}
.rotate-icon{
    transform: rotate(-90deg);
}
.menu-item span{
    display: inline-block;
    overflow: hidden;
    width: 69px;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    transition: width .2s ease .2s;
}
.menu-item i{
    transform: translateX(0px);
    transition: font-size .2s ease, transform .2s ease;
    vertical-align: middle;
    font-size: 16px;
}
.collapsed-menu span{
    width: 0px;
    transition: width .2s ease;
}
.collapsed-menu i{
    transform: translateX(5px);
    transition: font-size .2s ease .2s, transform .2s ease .2s;
    vertical-align: middle;
    font-size: 22px;
}
</style>
